<template>
  <div class="container">
    <div class="chart">
      <WChart :option="option" width="100%" height="100%" />
    </div>
  </div>
</template>
<script>
import WChart from '@comp/chart/index.vue'
export default {
  name: 'LeftItem2',
  components: {
    WChart
  },
  data() {
    return {
      option: {
        grid: {
          top: '20',
          left: '10',
          right: '10',
          bottom: '20',
          containLabel: true
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 60],
            center: ['50%', '50%'],
            label: {
              formatter: '{b}\n{d}%'
            },
            data: [
              { value: 60465, name: '安全管理' },
              { value: 50587, name: '设备设施' },
              { value: 48562, name: '人身安全' },
              { value: 46598, name: '电力安全' },
              { value: 39879, name: '大坝安全' },
              { value: 36561, name: '其他事故' }
            ]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  justify-content: right;
  .chart {
    width: 100%;
    height: 100%;
  }
  .title {
    width: 50%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    span {
      font-size: 16px;
      padding: 5px 10px;
    }
  }
}
</style>
